<template>
    <div>
        <!-- 头部 -->
        <div class="top_tab1">
            <div class="left1" @click="back()">
                <img  src="../assets/order_center/shangs.png">
            </div>
            <span>消息</span>
            <div class="right1">
            </div>
        </div>
        <div class="n"></div>
        <div class="messtab">
            <div class="mestimg">
                <img src="../assets/product/mes.png" alt="">
            </div>
            <div class="mesright">
                <div class="mesrigtop">
                    <div class="mesdianmin">柔莱芬家居服</div>
                    <div>星期一</div>
                </div>
                <div>[验收提醒]</div>
            </div>
        </div>
        <div class="messtab">
            <div class="mestimg">
                <img src="../assets/product/mes01.png" alt="">
            </div>
            <div class="mesright">
                <div class="mesrigtop">
                    <div class="mesdianmin">糯米家STUDIOSSS</div>
                    <div>星期一</div>
                </div>
                <div>您好</div>
            </div>
        </div>
        <div class="messtab">
            <div class="mestimg">
                <img src="../assets/product/mes02.png" alt="">
                <yd-badge class="mesjiaobiao" type="danger">33</yd-badge>
            </div>
            <div class="mesright">
                <div class="mesrigtop">
                    <div class="mesdianmin">梨花GO</div>
                    <div>星期一</div>
                </div>
                <div>[亲，请您核对订单信息]</div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Badge } from "vue-ydui/dist/lib.rem/badge";
Vue.component(Badge.name, Badge);

export default {
  name: "message",
  data() {
    return {};
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    }
  }
};
</script>
<style>
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}
.n {
  height: 0.9rem;
}
.messtab {
  margin: 0.3rem;
  height: 1.6rem;
  background: #fff;
  border-radius: 0.2rem;
  padding: 0.3rem;
  display: flex;
}
.mestimg {
  width: 1rem;
  height: 1rem;
  position: relative;
}
.mestimg img {
  width: 100%;
  height: 100%;
  border-radius: 0.1rem;
}
.mesjiaobiao {
  position: absolute;
  top: -0.2rem;
  right: -0.2rem;
}
.mesright {
  width: 80%;
  margin-left: 0.3rem;
  font-size: 0.3rem;
  color: #999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mesrigtop {
  display: flex;
  justify-content: space-between;
}
.mesdianmin {
  color: #333;
}
</style>

